<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>update Emp</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css"
			href="css/style.css" />
	</head>

	<body>
		<div id="wrap">
			<div id="top_content">
				<div id="header">
					<div id="rightheader">
						<p>
							2009/11/20
							<br />
							<a href="javascript:;" @click="logout">安全退出</a>
						</p>
					</div>
					<div id="topheader">
						<h1 id="title">
							<a href="/ems_vue/emplist.html">main</a>
						</h1>
					</div>
					<div id="navigation">
					</div>
				</div>
				<div id="content">
					<p id="whereami">
					</p>
					<h1>
						update Emp info:
					</h1>
					<form action="emplist.html" method="post">
						<table cellpadding="0" cellspacing="0" border="0"
							class="form_table">
							<tr>
								<td valign="middle" align="right">
									id:
								</td>
								<td valign="middle" align="left">
									{{emp.id}}
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									name:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" v-model="emp.name"/>
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									old photo:
								</td>
								<td valign="middle" align="left">
									<img :src="'/ems_vue/'+emp.path" style="height: 50px;" alt="">
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									photo:
								</td>
								<td valign="middle" align="left">
									<input type="file" ref="photo" />
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									salary:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" v-model="emp.salary"/>
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									age:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" v-model="emp.age"/>
								</td>
							</tr>
						</table>
						<p>
							<input type="button" class="button" @click="editEmp" value="Confirm" />
						</p>
					</form>
				</div>
			</div>
			<div id="footer">
				<div id="footer_bg">
					ABC@126.com
				</div>
			</div>
		</div>
	</body>
</html>
<script src="/ems_vue/js/vue.js"></script>
<script src="/ems_vue/js/axios.min.js"></script>
<script>
    var app=new Vue({
        el: "#wrap",
        data:{
            user:{},
			emp:{}
        },
        methods:{
            logout(){
                localStorage.removeItem("user");
                location.reload(true);
            },
            editEmp(){
                console.log(this.emp);
                console.log(this.$refs.photo.files[0]);
                //文件上传请求方式必须为post，enctype必须为multipart/form-data
                var formData=new FormData();
                formData.append("id",this.emp.id);
                formData.append("name",this.emp.name);
                formData.append("path",this.emp.path);
                formData.append("salary",this.emp.salary);
                formData.append("age",this.emp.age);
                formData.append("photo",this.$refs.photo.files[0]);
                var _this=this;
                axios({

                    method:"post",
                    url:"http://localhost:8989/ems_vue/emp/update",
                    data:formData,
                    headers:{
                        'content-type':'multipart/form-data'
                    }
                }).then(res=>{
                    console.log(res.data);
                    if (res.data.state){
                        if (window.confirm(res.data.msg+",点击确定跳转到列表页面")){
                            location.href="/ems_vue/emplist.html";
                        }
                    } else {
                        alert(res.data.msg);
                    }
                });
            }
        },
        created(){
            var userString = localStorage.getItem("user");
            if(userString){
                this.user=JSON.parse(userString);
            }else {
                alert("您尚未登录，请先登录！！");
                location.href="/ems_vue/login.html";
            }
			var start = location.href.lastIndexOf("=");
            var id=location.href.substring(start+1);
            console.log(id);
            var _this=this;
            axios.get("http://localhost:8989/ems_vue/emp/findOne?id="+id).then(res=>{
                console.log(res.data);
                _this.emp=res.data;
            })
        }
    });
</script>